<template>
  <el-row
    :gutter="24"
    style="margin-left:10px"
  >
    <el-col :span="17">
      <el-tabs
        class="table-form-detail"
        type="border-card"
      >
        <el-tab-pane label="基本信息">
          <DetailContent :data-model="device_repairItems.detailInfo" />
          <el-col
            :span="24"
            class="table-show-info"
          >
            <h-table-list
              border
              type="local"
              :data="[device_repairItems.detailInfo.deviceInfo]"
              :show-pagination="false"
              :columns="data.repairDeviceColumns"
            >
              维修设备
            </h-table-list>
          </el-col>
          <el-col
            v-for="item in device_repairItems.detailInfo.recordHis"
            class="repaired-result"
          >
            <p>维修结果</p>
            <el-col>
              <p>失败原因:{{ item.remark }}</p>
            </el-col>
            <el-col>
              <p>维修记录:{{ item.repRecordDesc }}</p>
            </el-col>
            <el-col>
              <el-col
                v-for="e in item.files"
                class="history-repaired"
                :span="8"
              >
                <el-col
                  class="history-repaired-head"
                  :span="24"
                ><img
                  width="28px"
                  style="vertical-align: top;"
                  :src="picture"
                ><span>{{ e.archiveFileName }}</span>
                </el-col>
                <el-col
                  :span="24"
                  type="flex"
                >
                  <el-col :span="8"><a
                    :href="e.viewPath"
                    target="_blank"
                  >查看</a></el-col>
                  <el-col :span="8" />
                  <el-col :span="8"><a
                    :href="e.viewPath"
                    download
                  >下载</a></el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col
            :span="24"
            class="table-show-info"
          >

            <h-table-list
              border
              type="local"
              :data="[device_repairItems.detailInfo.userInfo]"
              :show-pagination="false"
              :columns="data.repairPersonColumns"
            >
              维修员
            </h-table-list>
          </el-col>
          <el-col
            :span="24"
            class="table-show-info"
          >
            <h-table-list
              border
              type="local"
              :data="device_repairItems.detailInfo.checkRecordVOList"
              :show-pagination="false"
              :columns="data.plantCheckDeviceColumns"
            >
              点检异常
              <template slot="operate-pic" slot-scope="scope">
                <a v-if="scope.row.pic" :href="scope.row.pic?scope.row.pic.viewPath:''" target="_blank" download="123">下载</a>
                <a v-if="scope.row.pic" :href="scope.row.pic?scope.row.pic.viewPath:''" target="_blank">查看</a>
              </template>
              <template slot="operate-video " slot-scope="scope">
                <a v-if="scope.row.video" :href="scope.row.video?scope.row.video.viewPath:''" target="_blank" download="123">下载</a>
                <a v-if="scope.row.video" :href="scope.row.video?scope.row.video.viewPath:''" target="_blank">查看</a>
              </template>
            </h-table-list>
          </el-col>
          <el-col
            :span="24"
            class="table-show-info"
          >
            <h-table-list
              border
              type="local"
              :data="device_repairItems.detailInfo.preserveRecordVOList"
              :show-pagination="false"
              :columns="data.preserveDeviceColumns"
            >
              保养异常
            </h-table-list>
          </el-col>
          <el-col
            :span="24"
            class="table-show-info"
          >
            <h-table-list
              border
              type="local"
              :data="device_repairItems.detailInfo.patrolRecordVOList"
              :show-pagination="false"
              :columns="data.xunjianDeviceColumns"
            >
              巡检异常
              <template slot="operate-pic" slot-scope="scope">
                <a v-if="scope.row.pic" :href="scope.row.pic?scope.row.pic.viewPath:''" target="_blank" download="1">下载</a>
                <a v-if="scope.row.pic" :href="scope.row.pic?scope.row.pic.viewPath:''" target="_blank">查看</a>
              </template>
              <template slot="operate-video " slot-scope="scope">
                <a v-if="scope.row.video" :href="scope.row.video?scope.row.video.viewPath:''" target="_blank" download="1">下载</a>
                <a v-if="scope.row.video" :href="scope.row.video?scope.row.video.viewPath:''" target="_blank">查看</a>
              </template>
            </h-table-list>
          </el-col>

          <DownloadIdentify
            :visible.sync="visible"
            title="维修"
            @cancel="cancel"
            @update="()=>checkItem(2)"
          >
            <el-form
              ref="ruleForm1"
              :model="ruleForm1"
              :rules="rules"
              label-width="100px"
              class="demo-ruleForm"
            >

              <el-form-item
                label="失败原因"
                prop="remark"
              >
                <el-input v-model="ruleForm1.remark" />
              </el-form-item>

            </el-form>
          </DownloadIdentify>
          <el-col>
            <el-row
              class="edit-form-button"
              type="flex"
              justify="center"
            >
              <el-button
                type="primary"
                @click="()=>checkItem(1)"
              >维修成功</el-button>
              <el-button @click="()=>check()">维修失败</el-button>
            </el-row>
          </el-col>

        </el-tab-pane>
      </el-tabs>
    </el-col>
    <el-col
      :span="7"
      class="table-form-approve"
    >
      <Approve :data-key="device_repairItems.device_repairItemsId" />
    </el-col>
  </el-row>
</template>
<script>
import Approve from '@/components/ApproveForm'
import DetailContent from './detailContent'
import DownloadIdentify from '@/components/FormDialog'
import HistoryContent from './historyContent'
import data from './const'
import pic from './pic.png'
import { mapState, mapMutations } from 'vuex'
const recordHis = [
  {
    repRecordDesc: '维修描述1',
    remark: '失败原因1',
    files: [
      {
        url: 'https://www.dogedoge.com/assets/new_logo_header.min.png',
        name: '文件1'
      },
      {
        url: 'https://www.dogedoge.com/assets/new_logo_header.min.png',
        name: '文件1'
      },
      {
        url: 'https://www.dogedoge.com/assets/new_logo_header.min.png',
        name: '文件1'
      }
    ]
  },
  {
    repRecordDesc: '维修描述2',
    remark: '失败原因2',
    files: [
      {
        url: 'https://www.dogedoge.com/assets/new_logo_header.min.png',
        name: '文件2'
      },
      {
        url: 'https://www.dogedoge.com/assets/new_logo_header.min.png',
        name: '文件1'
      },
      {
        url: 'https://www.dogedoge.com/assets/new_logo_header.min.png',
        name: '文件1'
      }
    ]
  }
]
export default {
  components: { Approve, DetailContent, HistoryContent },
  data() {
    this.$store.dispatch(
      'device_repairItems/setDetailInfo',
      data.detailShowInfo
    )
    return {
      visible: false,
      ruleForm1: {
        remark: ''
      },
      rules: {
        remark: [
          {
            required: true,
            message: '请输入失败原因'
          }
        ]
      },
      recordHis: recordHis,
      picture: pic,
      data
    }
  },
  computed: {
    ...mapState(['device_repairItems'])
  },
  created() {
    const dataKey = this.$route.fullPath
    const id = localStorage.getItem(dataKey)
    this.$store.dispatch('device_repairItems/requestDeviceDetailInfo', id)
  },
  methods: {
    cancel() {
      this.visible = false
    },
    check() {
      this.visible = true
    },
    checkItem(state) {
      const dataKey = this.$route.fullPath
      const id = localStorage.getItem(dataKey)
      const data = { id: id, checkStatus: state }
      if (this.ruleForm1.remark) {
        data.remark = this.ruleForm1.remark
      }
      // 验收成功
      this.$store
        .dispatch('device_repair_maintenance/checkItem', data)
        .then(res => {
          this.$message('操作成功')
          this.visible = false
        })
    }
  }
}
</script>
<style>
.table-show-info {
  margin-bottom: 10px;
}
.history-repaired-head {
  background: aliceblue;
}
.history-repaired-foot {
  text-align: justify;
  color: #3b7cff;
}
.repaired-result {
  margin: 20px;
  padding: 10px;
  background: #f5f6fa;
}
</style>
